<template>
  <div class="exhibits-box">
    <div class="exhibits-left">
      <titles :title="props.info.text" />
      <div class="exhibits-text hw-wrap-spase">
        <span
          :style="{
            fontSize: store.styleInfo.contentSize,
            fontFamily: store.styleInfo.textFamily,
            color: store.styleInfo.fontColor,
          }"
        >
          {{ props.info.remarks }}
        </span>
      </div>
    </div>
    <div class="exhibits-right">
      <div class="item-left">
        <div class="item-heard">
          <span class="item-heard-1" :style="{ fontFamily: store.styleInfo.fontFamily }">
            {{ props.tabDatas[0].name }}</span
          >
          <span
            class="text-ov-hid-style1"
            :style="{
              fontSize: store.styleInfo.contentSize,
              fontFamily: store.styleInfo.textFamily,
              color: store.styleInfo.fontColor,
            }"
            >{{ props.tabDatas[0].description }}</span
          >
        </div>
        <t-image
        style="cursor: pointer;"
          class="item-left-img"
          v-for="item in list"
          :key="item.id"
          @click="pathInfo(item.id)"
          :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/280/h/374/format/webp')"
          alt=""
        />
      </div>
      <div class="item-right">
        <t-image
        style="cursor: pointer;"
          class="item-right-img"
          v-for="item in list2"
          :key="item.id"
          @click="pathInfo(item.id)"
          :src="$filters.getLinkUrl(item.coverUrl, '?imageView2/1/w/280/h/374/format/webp')"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { pathList, pathListLoop } from '../route';
import { ref } from 'vue';
import { urls } from '@/utils/request/upload';
import titles from '@/components/title/title.vue';
import buttonIcon from '@/components/title/buttonIcon.vue';
import { useProjectStore } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const list = ref([]);
const list2 = ref([]);
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
});
props.tabDatas.forEach((el, index) => {
  if (index % 2 == 0) {
    list2.value.push(el);
  } else {
    list.value.push(el);
  }
});
const pathInfo = (e: number) => {
  router.push({
    path: route.meta.loopType ? pathListLoop[2] : pathList[2],
    query: { id: e, moduleId: props.info.id, projectId: localStorage.getItem('projectId') },
  });
};
</script>

<style lang="less" scoped>
@import './index.less';
.exhibits-box {
  display: flex;
}
.exhibits-left {
  display: flex;
  flex-direction: column;
  width: 480px;
  margin-right: 80px;
}
.exhibits-right {
  flex: 1;
  display: flex;

  .title {
    font-size: 34px;
    font-family: FZQINGKBYSS-B--GB1-0, FZQINGKBYSS-B--GB1;
    font-weight: normal;
    color: #333333;
    line-height: 52px;
    margin-bottom: 100px;
  }
  .exhibits-text {
    display: flex;
    height: 120px;
    font-weight: 500;
    color: #333333;
    line-height: 30px;
    width: 100%;

    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 4; //行数
    line-clamp: 4;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
    span {
      width: 100%;
    }
  }
}
.item-left {
  width: 49%;
  margin-right: 2%;
  .item-left-img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}
.item-right {
  display: flex;
  width: 49%;
  flex-direction: column;
  .item-right-img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
}
.item-heard {
  display: flex;
  flex-direction: column;
}
.item-heard-1 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.text-ov-hid-style1 {
  margin-bottom: 53px;
}
</style>
